<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		computed:计算属性（监控属性)
		计算某个属性值，使用的时候，以属性的方式使用，
		因为要有计算的过程，所以是函数的写法。
		属性值--》get方法里面的return的结果
		
		1. 缓存****
		2. 逻辑简单
		3. 多个值改变，影响到一个结果的时候，使用
		
		methods:存放方法,逻辑复杂,函数调用的方式使用
		
		<div id="app">
			姓：<input type="text" v-model="firstName">+
			名：<input type="text" v-model="lastName">
			{{fullName}}
			<input type="text" v-model="fullName">
			
			<button @click="show">点击</button>
		</div>
		<script>
			let vm=new Vue({
				el:"#app",
				data:{
					firstName:"李",
					lastName:"丽丽"
				},
				methods:{
					show(){
						//.....
						alert("111");
					}
				},
				computed:{
					// fullName(){//简写---》get
					// 	return this.firstName+"--"+this.lastName;
					// }
					fullName:{//全写
						get(){//获取fullName的值
							return this.firstName+"--"+this.lastName;
						},
						set(newValue){//设置值，根据fullName,来设置值
							console.log(newValue);
							//“李--丽丽”
							let arr=newValue.split("--");
							this.firstName=arr[0];
							this.lastName=arr[1];
						}
					}
				}
			})
		</script>
	</body>
</html>
